<template>
	<view class="container">
		<view v-for="(item,index) in list" :key="index" class="userinfo first" @click="ondetail(item)">
			<view style="margin-top: 24rpx;margin-left: 10rpx;">
				<image style="width:100rpx;height: 100rpx;" :src="item.icon??'/static/img/tx.png'"></image>
			</view>
			<view class="userinfo-right">
				<view class="userinfo-1">
					<view class="userinfo-2">
						<view class="userinfo-name">
							{{item.realName}}
						</view>
						<view class="userinfo-level">
							L{{item.vip??''}}
						</view>
						<view class="userinfo-tuijian">
							推荐
						</view>
						<view class="userinfo-xin">
							<up-rate readonly size="12" gutter="1" v-model="item.xing" active-color="#faca06"
								inactive-color="#b2b2b2"></up-rate>
						</view>
					</view>
					<view class="userinfo-year">
						从业{{item.work}}年
					</view>
				</view>
				<view style="display: flex;margin-top: 12rpx;">
					<view class="userinfo-21" style="width: 106rpx;">
						<view style="display: none;">¥50/时</view>
					</view>
					<view class="userinfo-22">
						<image style="height: 26rpx;width: 26rpx;margin: 0 4rpx 0 4rpx;"
							src="/static/images/index/sex.png"></image>
						{{item.birthday}}
					</view>
					<view class="userinfo-23">
						<image style="height: 30rpx;width: 30rpx;" src="/static/images/index/3.png"></image>
					</view>
					<view class="userinfo-24">
						<image style="height: 30rpx;width: 30rpx;" src="/static/images/index/4.png"></image>
					</view>
					<view class="userinfo-25">
						<image style="height: 30rpx;width: 30rpx;" src="/static/images/index/5.png"></image>
					</view>
					<view class="userinfo-26">
						<image style="height: 30rpx;width: 30rpx;" src="/static/images/index/6.png"></image>
					</view>
					<view class="userinfo-27">
						
					</view>
				</view>
				<view class="userinfo-28">
					<view class="button" @click.stop="remove(item)">
						删除
					</view>
					
				</view>
			</view>
		</view>
		<view v-if="list.length==0">
			
		</view>
	</view>
</template>

<script>
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app"
	import {
		reactive,
		toRefs,
		ref,
		watch,
		computed,
		onMounted,
	} from "vue"
	import {
		getcollect,
		removecollet,
	} from '@/api/user'
	import baseURL from '@/config/config'
	export default {

		setup() {
			const state = reactive({
				list: [{}],
			})
			onLoad((option) => {
				getData();
			})

			const getData = async () => {
				getcollect({
					parentId: state.id
				}).then(res => {
					state.list = res.data.records;
				})
			}
			const ondetail = (item) => {
				uni.navigateTo({
					url: `/subpages/cateinfo/detail?uid=${item.uid}&id=${item.id}`
				})
			}
			const remove = async (item) => {
				removecollet({id:item.id}).then(res=>{
					getData();
				});
			}
			
			return {
				...toRefs(state),
				ondetail,
				remove,
			}
		}

	}
</script>
<style>
	page {
		background-color: #EFEFEF;
	}
</style>
<style lang="scss" scoped>
	/* #ifdef H5 */
	page {
		height: auto;
		min-height: 100%;
	}

	/* #endif */
	.container {
		min-height: 100%;
		background: rgb(244, 244, 244);
	}

	.header {
		width: 750rpx;
		height: 410rpx;
		background-size: 100% 100%;
		background-image: url(/static/images/index/bj.png);
	}

	.title {
		display: flex;
		flex-direction: row;
		align-items: center;
		// justify-content: space-between;
		margin: 0 40rpx 40rpx 40rpx;
		color: #fff;
	}


	.banner {
		position: relative;
		width: 100%;
		// height: 600rpx;

		.bg {
			width: 100%;
			height: 600rpx;
		}

	}

	.userinfo {
		display: flex;
		height: 175rpx;
		margin: 4rpx 10rpx 0 10rpx;
		background-color: #fff;
		font-size: 28rpx;
	}

	.first {
		margin-top: 6rpx;
		border-radius: 8rpx 8rpx 0 0;
	}

	.userinfo-right {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin-left: 20rpx;
		margin-top: 10rpx;
	}

	.userinfo-1 {
		display: flex;
		justify-content: space-between;
	}

	.userinfo-2 {
		display: flex;
	}

	.userinfo-name {
		font-size: 30rpx;
	}

	.userinfo-level {
		font-size: 28rpx;
		margin-left: 5rpx;
		width: 80rpx;
		height: 48rpx;
		line-height: 48rpx;
		border-radius: 8rpx;
		background-color: rgb(255, 195, 13);
		text-align: center;
		color: #fff;
	}

	.userinfo-tuijian {
		font-size: 28rpx;
		margin-left: 5rpx;
		width: 80rpx;
		height: 48rpx;
		line-height: 48rpx;
		border-radius: 8rpx;
		background-color: rgb(255, 59, 64);
		text-align: center;
		color: #fff;
	}

	.userinfo-xin {
		margin-left: 5rpx;
		margin-top: 10rpx;
	}

	.userinfo-year {
		color: rgb(182, 182, 182);
		margin-right: 5rpx;
	}

	.userinfo-21 {
		font-size: 28rpx;
		color: rgb(13, 181, 86);
	}

	.userinfo-22 {
		border: 2rpx solid rgb(251, 115, 161);
		border-radius: 8rpx;
		color: rgb(251, 115, 161);
		margin-left: 20rpx;
		width: 80rpx;
		display: flex;
		align-items: center;
	}

	.userinfo-23 {
		margin-left: 10rpx;
	}

	.userinfo-24 {
		margin-left: 10rpx;
	}

	.userinfo-25 {
		margin-left: 10rpx;
	}

	.userinfo-26 {
		margin-left: 10rpx;
	}

	.userinfo-27 {
		margin-left: 40rpx;
		color: rgb(185, 185, 185);
	}

	.userinfo-28 {
		margin-top: 12rpx;
		text-align: right;
		color: rgb(140, 140, 140);
		display:flex;
		justify-content: flex-end;
		.button{
			background-color: rgb(255,96,45);
			width: 100rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			border-radius: 4rpx;
			color: #fff;
		}
	}
</style>